<template>
	<view class="bigbox">
		<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft" style="margin-bottom: 30rpx;">
			<view class="cu-item tab_qh" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in arr" :key="index" @tap="tabSelect" :data-id="index">{{item.name}}{{item.num}}</view>
		</scroll-view>
		<!-- 公告 -->
		<view v-if="TabCur == 0">
			<view v-if="gg_list.length!=0" class="box" v-for="item in gg_list" @click="shanchu(item.id)">
				<view class="title">
					<view>{{item.titile}}</view>
					<view style="font-size: 26rpx;">{{item.startTime}}</view>
				</view>
				<view class="fu_title">{{item.msgAbstract}}</view>
				<view v-html="item.msgContent"></view>
			</view>
			<view v-if="gg_list.length==0" class="msg">暂无消息</view>
		</view>
		<!-- 消息 -->
		<view v-if="TabCur == 1">
			<view v-if="xx_list.length!=0" class="box" v-for="item in xx_list" @click="shanchu(item.id)">
				<view class="title">
					<view>{{item.titile}}</view>
					<view style="font-size: 26rpx;">{{item.startTime}}</view>
				</view>
				<view class="fu_title">{{item.msgAbstract}}</view>
				<view v-html="item.msgContent"></view>
			</view>
			<view v-if="xx_list.length==0" class="msg">暂无消息</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xx_list:[],
				gg_list:[],
				sta:'',
				arr:[
					{name:'公告',num:'(0)'},
					{name:'消息',num:'(0)'},
				],
				TabCur: 0,
				scrollLeft: 0
			}
		},
		mounted() {
			this.initial()
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				console.log(e)
			},
			shanchu:function(id){
				this.$post('sys/sysAnnouncementSend/appeditByAnntIdAndUserId?anntId=' + id,{
					anntId:id
				}).then((res)=>{
					if(res.data.success == true){
						this.initial()
					}
				})
			},
			initial:function(){
				this.$get('sys/annountCement/listByUser').then((res)=>{
					this.gg_list = res.data.result.anntMsgList//公告
					this.arr[0].num = '(' + this.gg_list.length + ')'
					this.xx_list = res.data.result.sysMsgList//消息
					this.arr[1].num = '(' + this.xx_list.length + ')'
				})
			}
		},
		
	}
</script>

<style>
	.tab_qh{
		width: 50%;
		text-align: center;
	}
	.msg{
		text-align: center;
		margin-top: 300rpx;
		font-size:34rpx;
		font-family:PingFang SC;
		font-weight:800;
		color:rgba(51,51,51,1);
	}
	.fu_title{
		margin: 20rpx 0;
		color: #3A62FF;
		
	}
	.title{
		height: 140rpx;
		line-height: 60rpx;
		border-bottom: 1px solid #F5F5F5;
		font-size:35rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
	}
	.box{
		padding: 30rpx;
		box-sizing: border-box;
		background:rgba(255,255,255,1);
		box-shadow:0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius:10rpx;
		margin-bottom: 30rpx;
	}
	.bigbox{
		padding: 30rpx;
		box-sizing: border-box;
	}
</style>
